<template>
    <div>
        <table class="table table-bordered">
            <tr>
                <td>房间号</td>
                <td><input type="text" v-model="add.name"></td>
            </tr>
            <tr>
                <td>图片</td>
                <td>
                <td>
                    <input type="file" @change="imga">
                    <img :src="add.img" width="100" height="100" v-if="add.img != ''">
                </td>
                </td>
            </tr>
            <tr>
                <td>可住人员</td>
                <td>
                    <select v-model="add.address">
                        <option value="">==选择人数==</option>
                        <option value="3人">==3人==</option>
                        <option value="2人">==2人==</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>房间类型</td>
                <td>
                    <select v-model="add.sname">
                        <option :value="info.sname" v-for="info in list">{{ info.sname }}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>备注</td>
                <td>
                    <input type="checkbox" value="干湿分离" name="yao" v-model="add.yao">干湿分离
                    <input type="checkbox" value="免打扰" name="yao" v-model="add.yao">免打扰
                    <input type="checkbox" value="提供停车位" name="yao" v-model="add.yao">提供停车位
                </td>
            </tr>
            <tr>
                <td>退房时间</td>
                <td>
                    <input type="date" v-model="add.time1">
                </td>
            </tr>
            <tr>
                <td>状态</td>
                <td>
                    <input type="radio" :value="true" v-model="add.tyle">已入住
                    <input type="radio" :value="false" v-model="add.tyle">未入住
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="添加" @click="ok"></td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, onMounted } from "vue";
import moment from 'moment';
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

let add: any = reactive(
    {
        "name": "",
        "img": "",
        "address": "",
        "sname": "",
        "yao": [],
        "time1": "",
        "tyle": true,
        "isdel": true
    }
)
let list:any=ref([]);
onMounted(()=>{
    bind();
})
const bind=()=>{
    axios({
        url:'https://localhost:7207/api/Emp/bind',
        method:'post',
        params:add
    })
    .then(res=>{
        console.log(res);
        list.value=res.data;
    })
    .catch(err=>{
        console.log(err);
        
    })
}
const ok = () => {
    add.yao=add.yao.toString();
    axios({
        url: 'https://localhost:7207/api/Emp/add',
        method: 'post',
        data: add
    })
        .then(res => {
            console.log(res);
           if(res.data>0)
           {
            alert("添加成功");
            router.push("/Show")
           }
        })
        .catch(err => {
            console.log(err);

        })
}
const imga = (e: any) => {
    console.log(e);
    let obj = e.target.files[0];
    let f = new FormData();
    f.append('file', obj);
    axios({
        url: 'https://localhost:7207/api/Emp/ImgAdd',
        method: 'post',
        data: f
    })
        .then(res => {
            if (res.data =="格式不正确")
        {
                alert("格式不正确");
                return;
        }
            if (res.data =="大于2M")
        {
                alert("大于2M");
                return;
        }
            console.log(res);
            add.img=res.data;
        })
        .catch(err => {
            console.log(err);

        })
}
</script>

<style scoped></style>